<template>
  <div class="header_box" @click="screenfull()">
    焊联工业大数据平台
  </div>
</template>
<script>
import screenfull from 'screenfull'

export default {
  data() {
    return {
      isFullscreen: false

    }

  },

  methods: {
    /**

     * 全屏事件

     */

    screenfull() {
      if (screenfull.enabled) {
        console.log("错误")
        return false

      }

      screenfull.toggle()

      this.isFullscreen = true

    }
    ,

    /**

     * 是否全屏并按键ESC键的方法

     */

    checkFull() {
      var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled

// to fix : false || undefined == undefined

      if (isFull === undefined) {
        isFull = false

      }

      return isFull

    }

  }
  ,

  mounted() {
    window.onresize = () => {
// 全屏下监控是否按键了ESC

      if (!this.checkFull()) {
// 全屏下按键esc后要执行的动作

        this.isFullscreen = false

      }

    }

  }

}

</script>
<style lang="scss" scoped>
$background: white;
$color: black;
// $font:
.header_box {
  //    font-family: ;
  height: 3rem;
  background: url("../assets/header/head_bg.png") no-repeat top center;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  color: white;
  font-weight: bolder;
}
</style>
